<template>
  <div class="detailsLive-wrap">
    <div class="header">
      <p>{{ res.detailsLive.productName }}</p>
    </div>
    <img :src="res.detailsLive.coverUrl" alt="" />
    <div class="details-content">
      <div class="details-title">
        <p>直播课</p>
        <div class="text1">{{ res.detailsLive.productName }}</div>
      </div>
      <p>{{ res.detailsLive.productSubName }}</p>
      <div class="info">
        <h4>{{ res.detailsLive.originalPrice }}元</h4>
        <p class="p1">共{{ res.detailsLive.bizProdCount }}课</p>
        <p class="p2">已结课</p>
      </div>

      <div class="details-navs">
        <van-tabs>
          <van-tab title="标签 1">内容 1</van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
          <van-tab title="标签 3">内容 3</van-tab>
          <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>
      </div>
      <div class="display">
        <p>{{ res.detailsLive.productSubName }}</p>
        <h3>{{ res.detailsLive.productName }}</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
// https://api.xuantong.cn/product/api/product/201001/81?bizId=81&productType=201001

import { getCurrentInstance, reactive, ref } from "vue";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;

let res = reactive({
  detailsLive: {},
  curId: 1,
});
const active = ref(0);

const onClickLeft = () => history.back();

$axios("/apixt/product/api/product/201001/81?bizId=81&productType=201001").then(
  (data) => {
    res.detailsLive = data.data;
    console.log(res.detailsLive);
  }
);
</script>

<style lang="less">
.detailsLive-wrap {
  .header {
    height: 46px;
    background-color: #cccccc;
  }
  img {
    width: 100%;
    height: 212px;
  }
  .details-content {
    padding: 0 20px;
    .details-title {
      margin-top: 10px;
      display: flex;
      align-items: baseline;
      p {
        width: 44px;
        font-size: 10px;
        color: #fff;
        background: #c4a57f;
        border-radius: 5px;
        margin-right: 5px;
        padding: 3px;
        text-align: center;
      }
      .text1 {
        font-weight: 550;
        font-size: 14px;
      }
    }
    p {
      margin-top: 10px;
      color: #666;
      font-size: 14px;
      line-height: 20px;
    }
    .info {
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      h4 {
        color: #097276 !important;
        font-size: 18px;
      }
      .p1 {
        color: #555 !important;
        margin-left: 5px;
      }
      .p2 {
        color: #999 !important;
        margin-left: 5px;
      }
    }
    .details-navs {
    }
  }
}
</style>
